<template>
	<view class="boxtwo">
		<scroll-view class="scroll" scroll-x="true"  :scroll-into-view="'t'+(twoIndex>2?twoIndex-2:0)" scroll-with-animation="true">
			<text class="twonav" v-for="(item,index) in twoData" :key="item.id" @click="twoTap" :data-index="index" :id="'t'+index">
				{{item.title}}
			</text>
		</scroll-view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="100" @click="seiperTap">
			<swiper-item v-for="(swiper,index) in swiperData" :key="swiper.id">
				<image :src="swiper.pirc" mode=""></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"two-vue",
		data() {
			return {
				twoIndex:0,
				swiperIndex:0,
				twoData:[
					{
						id:1,
						title:"首页"
					},
					{
						id:2,
						title:"家用电器"
					},
					{
						id:3,
						title:"男装女装"
					},
					{
						id:4,
						title:"鞋靴箱包"
					},
					{
						id:5,
						title:"手机数码"
					},
					{
						id:6,
						title:"电脑办公"
					},
					{
						id:7,
						title:"家居家纺"
					},
					{
						id:8,
						title:"个人化妆"
					},
					{
						id:9,
						title:"休闲运动"
					},
					{
						id:10,
						title:"知识分类"
					}
				],
				swiperData:[
					{
						id:1,
						pirc:"https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg"
					},{
						id:2,
						pirc:"https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978396430.jpg"
					},{
						id:3,
						pirc:"https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg"
					},{
						id:4,
						pirc:"https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg"
					},{
						id:5,
						pirc:"https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978397105.jpg"
					}
				]
			};
		},
		methods:{
			twoTap(e){
				console.log(e.currentTarget.dataset.index);
				this.twoIndex = e.currentTarget.dataset.index;
			},
			seiperTap(event){
				console.log(event);
			}
		}
	}
</script>

<style lang="less">
.scroll{
	height: 60rpx;
	background-color: darkcyan;
	line-height: 60rpx;
	display: flex;
	white-space: nowrap;
	.twonav{
	color: white;	
	padding: 0rpx 20rpx;
	}

}
	.swiper{
		width: 100%;		
		height: 265rpx;
		image{
			width: 100%;
			height: 265rpx;
		}
	}
</style>